<template>
    <h1>Home</h1>
    <div style="display: flex;gap:20px">
        <button v-for="item in routes" @click="handleClick(item.path)">{{ item.name }}</button>
        <!-- <button @click="handleClick('four')">go Four</button> -->
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "../store";
import { TestApi, GetDynamicRoutes } from '../apis/index';
import { useRouter } from "vue-router";
import { computed } from "@vue/reactivity";
import { onMounted } from "vue";

const router = useRouter();
const store = useStore();

// 动态路由表
const routes = computed(() => store.routes);

const handleClick = (path: string) => {
    if (path == '/PageFour/:id/:type') {
        router.push({ name: 'PageFour', params: { id: 12315, type: 'Vue3' } })
        return
    }
    if(path == 'four') {
        router.push({ name: 'PageFour', params: { id: 8136, type: 'vite4' } })
        return
    }
    router.push({ path })
}

onMounted(() => {
    // console.log('动态路由加载前：',router.getRoutes());

    if (store.routes.length < 1) {
        GetDynamicRoutes().then(res => {
            store.addRoutes(res.data.data, router)
            console.log('动态路由加载后：', router.getRoutes());
        })
    }

    TestApi().then(res => {
        // res
    } ).catch(e=> {
        console.log(e);
    })
})


</script>